<template>
	<view class="cell">
		<view class="flex" style="align-items: center;">
			<image class="icon" src="https://oss.jxhecong.com/v2/image/message_bike@2x.png"></image>
			<view class="site-name">{{data.name}}</view>
		</view>
		<view class="address">{{data.address}}</view>
		<view class="time">{{data.startTime}} - {{data.endTime}}</view>
		<view class="label-list">
			<view v-for="(item,index) in data.labels" :key="index" class="label">{{item}}</view>
		</view>
		<view class="info-list">
			<view>
				<text style="color: #FA3534;font-size:24rpx;">¥</text>
				<text style="color: #FA3534;font-weight: bold;font-size:54rpx;">{{data.amount}}</text>
			</view>
			<view>
				<view class="info-box" style="margin-right:30rpx;">
					<text style="display: inline-block; background-color:#6ABF6C;width:60rpx;text-align: center;">慢充</text>
					<text style="color:#6ABF6C;margin-left:12rpx;">闲{{data.expireSlowCount}}</text>
					<text style="display: inline-block;color: #303133;margin-left:6rpx;margin-right:10rpx;">/{{data.totalSlowCount}}</text>
				</view>
				<view class="info-box" style="border-color: #FF9900;">
					<text style="display: inline-block; background-color:#FF9900;width:60rpx;text-align: center;">快充</text>
					<text style="color:#6ABF6C;margin-left:12rpx;color: #FF9900;">闲{{data.expireQuickCount}}</text>
					<text style="display: inline-block;color: #303133;margin-left:6rpx;margin-right:10rpx;">/{{data.totalQuickCount}}</text>
				</view>
			</view>
		</view>
		<view class="footer">
			<image src="https://oss.jxhecong.com/v2/image/port@2x.png"></image>
			<text>停车收费：以物业实际收费为准</text>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			data:{
				type:Object,
				default:{}
			}
		},
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cell{
		background: #FFFFFF;
		box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
		border-radius: 9px;
		padding:30rpx 30rpx 0rpx 30rpx;
		margin-top:24rpx;
	}
	.flex{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	.icon{
		width:36rpx;
		height:36rpx;
	}
	.site-name{
		color:#303133;
		font-size: 32rpx;
		font-weight: bold;
		margin-left:12rpx;
	}
	.address{
		color:#606266;
		font-size:24rpx;
		margin-top:14rpx;
	}
	.label-list{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-top:18rpx;
	}
	.label{
		background:rgba($color: #6ABF6C, $alpha: 0.08);
		border-radius: 15rpx;
		height:30rpx;
		color:#6ABF6C;
		font-size:18rpx;
		line-height:30rpx;
		text-align: center;
		padding: 0rpx 18rpx;
		margin-right:12rpx;
	}
	.info-list{
		display: flex;
		justify-content: space-between;
		align-items: center;
	    margin-top:36rpx;
	}
	.info-box{
		display:inline-table;
		justify-content: flex-start;
		align-items: center;
		border: solid 1rpx #6ABF6C;
		border-radius:6rpx;
		height:36rpx;
		font-size:24rpx;
		color:#FFFFFF;
	}
	.time{
		color:#606266;
		font-size:24rpx;
		margin-top:12rpx;
	}
	.footer{
		height:64rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-top: solid 1rpx #DCDFE6;
		margin-top:18rpx;
		image{
			width:36rpx;
			height:36rpx;
		}
		text{
			color:#606266;
			font-size:24rpx;
			margin-left:12rpx;
		}
	}
</style>
